/**
 * Created by thomas on 2017/5/7.
 */
import React,{Component} from 'react';
import Load from './loading_page';
import { withRouter } from 'react-router-dom'
class Cart extends React.Component{
    constructor(props) {
        super(props);
        this.state= {
            first:true,
            fix_num:0.1,
            path:sessionStorage.getItem("img_path"),
            width:document.body.clientWidth,
            reduce:375-document.body.clientWidth,
            hide_load:true
        };
        this.change_ul=this.change_ul.bind(this);
        this.change_num=this.change_num.bind(this);
    }
    change_ul(e){
        //设值
        sessionStorage.setItem("weight",this.refs.num.innerText);
        this.props.get_dot(3);
        this.setState({
            hide_load:false
        },()=>{
            let img =new Image();
            img.src = sessionStorage.getItem("img_path")+"/height.jpg?1";
            img.onload = function(){
                img.onload = null;
                setTimeout(()=>{
                    this.props.history.push(e)
                },300)
            }.bind(this);
        }
       )
    }
    componentDidMount(){
        // alert(1)
        // console.log(this.refs.scroll);
        this.refs.move_img.scrollLeft=213+this.state.reduce/2;
    }
    change_num(){
        let  reduce_num = ((213+this.state.reduce/2 - this.refs.move_img.scrollLeft+1)/100).toFixed(1);
        if(this.state.first === true){
            this.refs.num.innerText=50;
            this.setState({
                first:false
            })
            return
        }
        this.refs.num.innerText=50+(-reduce_num*10);
    }
    render() {
        return (
            <div className="Cart_container">
                <Load hid_load={this.state.hide_load}/>
                <div className="Cart_top_contain">
                      <div className="Cart_top_name">
                              当前体重
                      </div>
                      <div className="weight_num">
                          <span className="num_w" ref="num">50</span>
                          <span className="w_i">kg</span>
                      </div>
                      <div id="triangle-down"></div>
                </div>
                <div className="move_cart" ref="move_img" onScroll={()=>{this.change_num()}} >
                    <div className="inner_move_img " ref="scroll">
                        <img src={this.state.path+"/weight.jpg?1"} alt="" className="weight_img wrap_scroll"/>
                    </div>
                </div>
                <div onClick={() =>this.change_ul("/tacos/height")} className="next_step">下一步</div>
            </div>
        );
    }
}
export default withRouter(Cart);
